<template>
  <div>
    <van-row type="flex" align="center" class="cartlist">
      <van-col>
        <van-icon name="shop-o" size="16px" color="#3c3c3c"/>
        <span class="cartname">购物车列表</span>
      </van-col>
    </van-row>
    <!-- 购物车列表 -->
    <van-row
      type="flex"
      align="center"
      v-for="(item,index) in $store.state.goodsList"
      :key="item.goods_id"
      :class="{lastbox:index==$store.state.goodsList.length-1?true:false,goods:true}"
    >
      <van-swipe-cell>
        <van-col span="2">
          <div class="singlebox">
            <van-checkbox
              v-model="item.checked"
              icon-size="20px"
              checked-color="#d81e06"
              class="checkbox singleCheck"
              name="1"
              @change="checkedGoodsFn"
            ></van-checkbox>
          </div>
        </van-col>
        <van-col span="6">
          <router-link :to=" {path:'/pages/goods_detail/'+item.goods_id}">
            <van-image width="100%" height="100%" :src="item.pics[0].pics_sma"/>
          </router-link>
        </van-col>
        <van-col span="16">
          <div class="goodsright">
            <div class="goodstitle">{{item.goods_name.substr(0,40)}}</div>
            <div class="goodsinfo">
              <span class="price">￥{{item.goods_price}}</span>
              <span class="num">
                <van-stepper
                  v-model="item.goodsnum"
                  min="0"
                  integer
                  input-width="20px"
                  button-size="20px"
                />
              </span>
            </div>
          </div>
        </van-col>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="deteleGoods(item.goods_id)"
          />
        </template>
      </van-swipe-cell>
    </van-row>
    <!-- 提交订单栏 -->
    <van-submit-bar
      :price="$store.getters.total"
      button-text="提交订单"
      :disabled="$store.getters.toBuyGoodsList==0?true:false"
      @submit="onSubmit"
    >
      <van-checkbox
        v-model="$store.state.checkedAll"
        icon-size="20px"
        checked-color="#d81e06"
        class="checkbox"
        @click="selectAllFn"
      >全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapMutations(["selectAllFn", "checkedGoodsFn", "deteleGoods"]),
    ...mapActions(["addGoodsFn"]),
    onSubmit() {
      window.sessionStorage.setItem(
        "toBuyGoodslist",
        JSON.stringify(this.$store.getters.toBuyGoodsList)
      );
      this.$router.push("/pages/order");
    }
  },
  mounted() {},
  computed: {
    ...mapGetters(["total"]),
    ...mapState([])
  }
};
</script>

<style lang="less" scoped>
.van-icon {
  margin-left: 20px;
  vertical-align: middle;
  margin-right: 5px;
}
.cartlist {
  font-weight: 500;
}
.cartname {
  vertical-align: middle;
  color: #3c3c3c;
}
.goods {
  border-bottom: 1px solid #ccc;
  background: #fafafa;
}
.singlebox {
  position: relative;
  height: 100px;
}
.singleCheck {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.goodsright {
  box-sizing: border-box;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  color: #767a6d;
}
.goodsinfo {
  display: flex;
  justify-content: space-between;
  height: 20px;
  .price {
    font-weight: 600;
    color: #ff0000;
    line-height: 20px;
  }
}

.goodstitle {
  font-size: 16px;
}
.van-submit-bar {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.delete-button {
  height: 120px;
}
.lastbox {
  margin-bottom: 100px;
}
</style>